使用 TypeScript 的好處就不需要我多說了，kintone 的客製化開發也有支援型別，以下簡單介紹。

@kintone/dts-gen

@kintone/dts-gen 是 Cybozu 開發的工具之一，可以用來建立客製化開發的型別。不多說直接來安裝：

npm install -D @kintone/dts-gen

產生應用程式欄位型別

我們的應用程式會很欄位，透過 @kintone/dts-gen 可以直接指定產出型別並且指定檔名以及 namespace 等。

$ kintone-dts-gen --base-url https://***.cybozu.com \
                 -u username \
                 -p password \
                 --app-id 12 \
                 --type-name SampleFields \
                 --namespace company.name.types \
                 -o sample-fields.d.ts

除了上面使用 -u 和 -p 帳號密碼的方式外，也可以用 token 或是 oauth-token：

• --api-token
• --oauth-token

如果上面的指令順利的話，就會產生像下面的型別：

declare namespace company.name.types {
  interface SampleFields {
    下拉式選單: kintone.fieldTypes.DropDown;
    日期與時間: kintone.fieldTypes.DateTime;
    選項按鈕_0: kintone.fieldTypes.RadioButton;
    選項按鈕: kintone.fieldTypes.RadioButton;
    多行文字方塊_1: kintone.fieldTypes.MultiLineText;
    多行文字方塊_0: kintone.fieldTypes.MultiLineText;
    下拉式選單_0: kintone.fieldTypes.DropDown;
    多行文字方塊: kintone.fieldTypes.MultiLineText;
    單行文字方塊: kintone.fieldTypes.SingleLineText;
    單行文字方塊_1: kintone.fieldTypes.SingleLineText;
    單行文字方塊_0: kintone.fieldTypes.SingleLineText;
    單行文字方塊_3: kintone.fieldTypes.SingleLineText;
    單行文字方塊_2: kintone.fieldTypes.SingleLineText;
    單行文字方塊_5: kintone.fieldTypes.SingleLineText;
    單行文字方塊_4: kintone.fieldTypes.SingleLineText;
    單行文字方塊_6: kintone.fieldTypes.SingleLineText;
  }
  interface SavedSampleFields extends SampleFields {
    $id: kintone.fieldTypes.Id;
    $revision: kintone.fieldTypes.Revision;
    更新人: kintone.fieldTypes.Modifier;
    建立人: kintone.fieldTypes.Creator;
    建立時間: kintone.fieldTypes.CreatedTime;
    記錄號碼: kintone.fieldTypes.RecordNumber;
    更新時間: kintone.fieldTypes.UpdatedTime;
  }
}

新增至 tsconfig

接著把 @kintone/dts-gen 檔案中的 kintone.d.ts 加入 tsconfig 中，後續在宣告關鍵字才不會出錯，例如 kintone.events 等。

  "files" : [
    "./node_modules/@kintone/dts-gen/kintone.d.ts",
  ],

關於型別的 key

型別產生的 key 是使用表單欄位中的 欄位代碼，而不是欄位名稱。

有些人會希望欄位名稱及代碼都使用同一個中文，這樣比較方便管理，如果覺得用中文在程式碼上會變得很噁心的話，也可以改成英文，但可能會不方便辨識，所以可以搭配下面這個 Chrome 外掛：

フィールドコード表示 for kintone

這個套件可以在表單顯示的時候，下方會標注紅字 欄位代碼，可以更快速的辨識。